<template>
  <div class="outer">
    <h1>列表动画</h1>
    <button @click="addList">新增</button>
    <transition-group tag="ul" name="list">
      <li v-for="item in student" :key="item.id">
        {{ item.name }}
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "ListAni",
  data() {
    return {
      student: [
        { id: "001", name: "小王" },
        { id: "002", name: "小黄" },
        { id: "003", name: "小马" },
      ],
    };
  },
  methods: {
    deleteItem(id) {
      this.student = this.student.filter((item) => item.id !== id);
    },
    addList() {
      this.student.unshift({ id: Date.now(), name: "小李" });
    },
  },
};
</script>

<style scoped>
ul li {
  border: 1px solid #ccc;
  height: 30px;
  line-height: 30px;
}
.outer {
  width: 400px;
}

.list-enter,
.list-leave-to {
  opacity: 0;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s linear;
}

/* 控制正在离开动画的元素不占用空间的时候，剩下元素补上他的位置的时候，缓动效果 */
.list-move {
  transition: all 0.5s linear;
}

/* 控制正在动画的元素不再占用空间 */
.list-leave-active {
  position: absolute;
}
</style>